//命名空间
Ext.namespace('VAS');
/**
 * @class VAS.Label
 * @extends Ext.form.Field
 * 功能：Label控件
 * 使用方法：通过new或者xtype方式使用，具有Ext.form.Field的所有属性。属性介绍如下

 *         value : 显示文本 默认为‘label’

 *         cls : 样式      
 * @constructor
 * @param 
 * @author  
 * @version 1.0
 */
VAS.Label = Ext.extend(Ext.form.Field, {
	    	
	/**
	 * 样式
	 */
	cls : '',

	/**
	 * 默认的样式,英文自动换行
	 **/
	 style : 'word-break:break-all;word-wrap:break-word;',

	/**
     * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
     * @param {Mixed} value The value to set
     */
	
	//hideLabel:false,	
	initComponent : function() {		
		VAS.Label.superclass.initComponent.call(this);
	},
	
    setValue : function(v){
    	if(v==null){
    		v="";
    	}
        //设置对象
    	var ov = v;
    	//构建变更 和是否隐藏整个label
    	var rv = this.buildValue(ov);
    	//保存到value中

        this.value = rv;        
        if(this.rendered){
            this.el.dom.innerHTML  =this.value;            
            this.validate();
        }
    },
    
    /**
     * Returns the name attribute of the field if available
     * @return {String} name The field name
     */
    getName: function(){
         return this.rendered && this.name ? this.name : (this.hiddenName || '');
    },
    
    /**
     * 加载控件  同时保存各节点名称参数 方便以后调用
     * @param {object} ct 控件对象
     * @param {object} position 位置信息
     * @return void
     */
    onRender : function(ct, position){    	
    	//label模板
    	if(!this.template){    
                this.template = new Ext.Template("<span id={id} name={name} style={style} class={cls}>" +
                		"{value}" +
                		"</span>");  
        }
        //保存模板
        var label;
        var cfg = this.getAutoCreate();
        cfg.cls = this.cls;
		cfg.style = this.style;
        if(!cfg.name){
             cfg.name = this.name || this.id;
        }        
        //cfg.value
        cfg.value =this.value;
        if(this.text){
        	 cfg.value = this.text;
        }
        //判断位置信息
        if(position){
        	label =this.template.insertBefore(position, cfg,true);
        }else{
        	label =this.template.append(ct, cfg,true);
        }
        this.el = label;
        this.excu();
    },
    
    
    
    /**
     * 位置偏移调整
     */
    excu : function(){
    	var st = this.el.dom.parentNode.getAttribute("style");
        var newSt = st+" position:relative;padding-top:3;padding-left:3;";
        this.el.dom.parentNode.setAttribute("style",newSt);
        this.el.dom.parentNode.style.cssText = newSt;
    },
    
    /**
     * 构建变更部分
     */
    buildValue : function(ov){
    	var rv = ov;
    	//如果通过对象设置    	
    	if(ov.value){
    		rv = ov.value;
    		//默认为显示            
    		if(ov.visible != undefined){
    			var vis = ov.visible;
    			var allspan = this.el.dom.parentNode.parentNode;
    			if(!vis){
    				allspan.setAttribute("style","display:none;");
    				allspan.style.cssText = "display:none;";
    			}    						
    		}
    		//变更文字
    		if(ov.oldvalue != undefined){
    			if(ov.oldvalue.length>0){    				    				
    				var ovalue = ov.oldvalue;    				
    				this.buildOldValue(ovalue);
    			}    			
    		}
    	}
    	return rv;
    },
    
    reset : function(){
    	
    },
    
    /**
     * 配合detail子类实用，必须写在setValue中

     * 根据Record设置oldValue
     */
    setOldValueByRecord : function(field,orecord){
    	var ovalue = orecord[field];
    	this.buildOldValue(ovalue);
    	
    },
    
    buildOldValue : function(ovalue){
    	if(ovalue == undefined){
    		return;
    	}
    	var ospan = document.createElement("span");
    	ospan.setAttribute("style","color:red;word-break:break-all;word-wrap:break-word;");
    	ospan.style.cssText = "color:red;word-break:break-all;word-wrap:break-word;";
    	ospan.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;(" +ovalue+ ")";    				
    	this.el.dom.parentNode.appendChild(ospan);
    }

});

//注册组件xtype
Ext.reg('label', VAS.Label);



Ext.namespace('VAS');


/**
 * VAS.Detail Extension Class 详情组件的基类，定义了详情组件中的属性与方法，
 * @author 
 * @version 1.0
 * @class VAS.Detail
 * @extends  Ext.form.FormPanel 
 * @constructor
 * @param {Object}
 *            config Configuration options
 */
VAS.DynamicDetail = function(config) {
	// 设置布局与各个组件
	VAS.DynamicDetail.superclass.constructor.call(this, config);
	
	// 赋值
	if (this.data != undefined) {
		var _data = this.data.data[this.dataIndex];
		this.setValues(_data);
	}
	
}


Ext.extend(VAS.DynamicDetail, Ext.form.FormPanel, {
	
	autoHeight : true,
	
	url : '',
	
	collapsible : true,
	/**
	 * @cfg {String} 标题
	 */
	title : '基础资料',
	
	titleCollapse : true,
	/**
	 * @cfg {String} 是否使用圆角边框
	 */
	frame : true,
	/**
	 * @cfg {String} 是否显示 true显示，false不显示
	 */
	visible : true,
	/**
	 * @cfg {String} 数据索引，与后台数据的接口字段
	 */
	dataIndex : 'base',
	/**
	 * @cfg {String} 变更信息的数据索引
	 */
	oldDataIndex : '',

	data : undefined ,
	
		
	setValues : function(values){
        if(Ext.isArray(values)){ // array of objects
            for(var i = 0, len = values.length; i < len; i++){
                var v = values[i];
                var f = this.form.findField(v.id);
                if(f){
                    f.setValue(v.value);
                    if(this.trackResetOnLoad){
                        f.originalValue = f.getValue();
                    }
                }
            }
        }else{ // object hash
            var field, id;
            for(id in values){
                if(!Ext.isFunction(values[id]) && (field = this.form.findField(id))){
                    field.setValue(values[id]);
                    if(this.trackResetOnLoad){
                        field.originalValue = field.getValue();
                    }
                }
            }
        }
       // return this;
    },
	
	
	
	
	
	/**
	 * 初始化组件
	 */
	initComponent : function() {
		this.setVisible(this.visible);
		// 同步获取数据
		var _data = SyncAjax(this.url,{});
		this.data = _data;
		// 动态布局 Label
		this.setItems(_data);
		VAS.DynamicDetail.superclass.initComponent.call(this);
			
	},
	
	/**
	 * 添加子面板与字面板上的组件 此方法需要被子类覆盖
	 */
	setItems : function(_data) {
		var i=0;
		var arry1 = [];
		var arry2 = [];
		var ary = _data.data[this.dataIndex];
		var obj;
		for(var i=0;i<ary.length;i++) {
			obj = ary[i];
			if (i % 2 == 0) {
				arry1.push({
						id : obj.id ,
						labelStyle:"width:150px;text-align:left",
						xtype : 'label',
						fieldLabel : obj.fieldLabel,
						name : obj.name					
				})
			} else  {
				arry2.push({
						id : obj.id ,
						labelStyle:"width:150px;text-align:left",
						xtype : 'label',
						fieldLabel : obj.fieldLabel,
						name : obj.name					
				})
			}
			this.items = [{
					layout : 'column',
					columnWidth : 1,
					border : false,
					items : [{
						columnWidth : .5,
						layout : 'form',
						border : false,
						items : arry1						
					},{
						columnWidth : .5,
						layout : 'form',
						border : false,
						items : arry2
					}]
				}]
		}
	},
				
	/**
	 * 根据Component 属性name得到子元素
	 * @param {String} field 接口字段名
	 * @return {Array} Ext.Component
	 */
	getItemByField : function(field){		
		return this.find("name",field)[0];
	}
	
});

Ext.reg('dynamicdetail', VAS.DynamicDetail);
